<template>
  <div class="cinema-container">
    <!-- 影片介绍区 -->
    <div class="movie-info-area">
      <h2>今日影片介绍</h2>
      <div v-if="currentMovie">
        <h3>{{ currentMovie.title }}</h3>
        <p>{{ currentMovie.description }}</p>
        <img :src="currentMovie.poster" alt="影片海报">
      </div>
    </div>
    <!-- 电影院座位区 -->
    <div class="seats-area">
      <h2>电影院座位图</h2>
      <div class="seat-grid">
        <div v-for="(row, rowIndex) in seats" :key="rowIndex">
          <div v-for="(seat, seatIndex) in row" :key="seatIndex">
            <button
              :class="{
                occupied: seat.occupied,
                selected: seat.selected,
                purchased: seat.purchased
              }"
              @click="selectSeat(rowIndex, seatIndex)"
              :disabled="seat.purchased"
            >
              {{ seat.name }}
            </button>
          </div>
        </div>
      </div>
      <div class="seat-legend">
        <span class="occupied-legend">未售座位</span>
        <span class="selected-legend">已选座位</span>
        <span class="purchased-legend">已购票座位</span>
      </div>
    </div>
    <!-- 已选座位列表 -->
    <div class="selected-seats-area">
      <h3>已选座位：</h3>
      <ul>
        <li v-for="(seat, index) in selectedSeats" :key="index">{{ seat.name }}</li>
      </ul>
    </div>
    <!-- 提交按钮 -->
    <button @click="submit">提交</button>
    <!-- 电影播放器 -->
    <div id="movie-player" style="display: none;">
      <video id="movie-video" controls>
        <source :src="currentMovie.videoUrl" type="video/mp4">
        您的浏览器不支持视频播放。
      </video>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 座位数据，可根据实际情况从后端获取
      seats: [
        [
          { name: 'A1', occupied: false, purchased: false },
          { name: 'A3', occupied: false, purchased: false },
          { name: 'A5', occupied: false, purchased: false },
          { name: 'A7', occupied: false, purchased: false },
          { name: 'A9', occupied: false, purchased: false }
        ],
        [
          { name: 'B2', occupied: false, purchased: false },
          { name: 'B4', occupied: false, purchased: false },
          { name: 'B6', occupied: false, purchased: false },
          { name: 'B8', occupied: false, purchased: false },
          { name: 'B10', occupied: false, purchased: false }
        ],
        [
          { name: 'C1', occupied: false, purchased: false },
          { name: 'C3', occupied: false, purchased: true },
          { name: 'C5', occupied: false, purchased: false },
          { name: 'C7', occupied: false, purchased: false },
          { name: 'C9', occupied: false, purchased: false }
        ],
        [
          { name: 'D2', occupied: false, purchased: false },
          { name: 'D4', occupied: false, purchased: false },
          { name: 'D6', occupied: false, purchased: false },
          { name: 'D8', occupied: false, purchased: false },
          { name: 'D10', occupied: false, purchased: false }
        ],
        [
          { name: 'E1', occupied: false, purchased: false },
          { name: 'E3', occupied: false, purchased: false },
          { name: 'E5', occupied: false, purchased: false },
          { name: 'E7', occupied: false, purchased: false },
          { name: 'E9', occupied: false, purchased: false }
        ]
      ],
      // 已选座位列表
      selectedSeats: [],
      // 当前影片信息，可从后端获取
      currentMovie: {
        title: '《神秘冒险之旅》',
        description: '这是一部充满惊险刺激的冒险电影，主角们将带你探索神秘的未知世界，体验前所未有的奇妙旅程。',
        poster: '../public/ao.jpg', // 替换为真实海报链接
        videoUrl: '../public/美女.mp4' // 替换为真实的电影视频链接
      }
    };
  },
  methods: {
    // 选座方法
    selectSeat(rowIndex, seatIndex) {
      const seat = this.seats[rowIndex][seatIndex];
      if (seat.occupied || seat.purchased) {
        alert('此座位已被购买');
        return;
      }
      seat.selected =!seat.selected;
      if (seat.selected) {
        this.selectedSeats.push(seat);
      } else {
        const index = this.selectedSeats.findIndex(
          s => s.name === seat.name
        );
        this.selectedSeats.splice(index, 1);
      }
    },
    // 提交按钮点击方法
    submit() {
      if (this.selectedSeats.length === 0) {
        alert('未购票');
        return;
      }
      if (this.seats.every(row => row.every(seat => seat.purchased))) {
        alert('该电影院已无票');
        return;
      }
      this.selectedSeats.forEach(seat => {
        seat.purchased = true;
        seat.selected = false;
      });
      this.selectedSeats = [];
      alert('购票成功');
      // 显示电影播放器并播放电影
      const moviePlayer = document.getElementById('movie-player');
      moviePlayer.style.display = 'block';
      const movieVideo = document.getElementById('movie-video');
      movieVideo.play();
    }
  }
};
</script>

<style scoped>
.cinema-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
}

.movie-info-area {
  flex: 1;
  text-align: left;
  margin-right: 20px;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.seats-area {
  flex: 1;
  text-align: center;
}

.seat-grid {
  display: grid;
  grid-template-columns: repeat(5, 50px);
  grid-gap: 20px;
  margin-bottom: 20px;
  justify-content: center;
}

.seat-legend {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.seat-legend span {
  margin: 0 10px;
  padding: 5px 10px;
  border-radius: 3px;
}

.occupied-legend {
  background-color: gray;
  color: white;
}

.selected-legend {
  background-color: green;
  color: white;
}

.purchased-legend {
  background-color: black;
  color: white;
}

button {
  width: 50px;
  height: 50px;
  cursor: pointer;
  font-size: 14px;
  border: none;
  border-radius: 50%;
  background-color: #f0f0f0;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #e0e0e0;
}

.occupied {
  background-color: gray;
  color: white;
}

.selected {
  background-color: green;
  color: white;
}

.purchased {
  background-color: black;;
  color: white;
}

.selected-seats-area {
  flex: 1;
  margin-bottom: 20px;
}

button[type="submit"] {
  width: 120px;
  height: 40px;
  font-size: 16px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
  background-color: #0056b3;
}

img {
  width: 400px;
  height: 300px;
}

#movie-player {
  margin-top: 20px;
}

#movie-video {
  width: 600px;
  height: 400px;
}
</style>